<template>
    <div class="alert" v-if="compControl.showAlert" style="display: inline-flex">
        &ensp;
        <p>表格检查：</p>
        <p style="color: orangered">列表存在空值；</p>
    </div>
    <n-data-table
        striped
        :columns="tableControl.columns"
        :data="tableControl.data"
        :pagination="false"
        :bordered="false" style="min-width: 800px;" />
    <!-- ----------------------------------- -->
    <n-modal v-model:show="compControl.showModal">
        <n-card style="max-width: 600px" :bordered="true" role="dialog" aria-modal="true">
            <template #header>
                <p style="font-size: 1.25rem">修改配置项</p>
            </template>
            <template #header-extra>
                <n-icon style="cursor: pointer" size="18" @click="compControl.showModal = false">
                    <CloseFilled />
                </n-icon>
            </template>
            <div>
                <n-form
                    ref="formRef"
                    :model="compControl.modal_show_data"
                    label-placement="left"
                    label-width="3.5rem">
                    <n-form-item label="键名" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.key }}</p>
                    </n-form-item>
                    <n-form-item label="介绍" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.description }}</p>
                    </n-form-item>
                    <n-form-item label="默认值" class="wrapper-mb-1">
                        <p>{{ compControl.modal_show_data.default }}</p>
                    </n-form-item>
                    <n-form-item label="键值">
                        <n-space style="gap: 0; flex: 1" vertical>
                            <n-input
                                v-model:value="compControl.modal_show_data.value"
                                clearable
                                placeholder="Input" />
                            <n-space style="gap: 0 2px">
                                快捷填入：
                                <n-space style="gap: 0 4px">
                                    <n-tag
                                        size="small"
                                        class="tw-cursor-pointer"
                                        @click="compControl.modal_show_data.value = 'YES'">
                                        YES
                                    </n-tag>
                                    <n-tag
                                        size="small"
                                        class="tw-cursor-pointer"
                                        @click="compControl.modal_show_data.value = 'NO'">
                                        NO
                                    </n-tag>
                                </n-space>
                            </n-space>
                        </n-space>
                    </n-form-item>
                </n-form>
            </div>
            <template #footer>
                <n-space justify="space-between">
                    <n-space></n-space>
                    <n-space>
                        <n-button @click="compControl.showModal = false">取消</n-button>
                        <n-button type="primary" @click="compControl.handleConfirmEdit()">确认</n-button>
                    </n-space>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup lang="ts">
import { NButton, NSpace, useMessage } from 'naive-ui'
import { CloseFilled } from '@vicons/material'
import { h, onMounted, reactive } from 'vue'
import {
    apx_editOptionValue,
    axg_getOptions,
    axp_switchOption,
    type ConfigurationItem
} from '@/utils/interface/ConfigurationItem'
const message = useMessage()

const tableControl = reactive({
    columns: [
        {
            title: ' ',
            render: (row: ConfigurationItem, index: number) => {
                return row.active ? index + 1 : ''
            }
        },
        {
            title: '键名',
            key: 'key',
            sorter: 'default'
        },
        {
            title: '说明',
            key: 'description'
        },
        {
            title: '默认值',
            key: 'default',
            className: 'col-default'
        },
        {
            title: '当前值',
            key: 'value',
            render: (row: ConfigurationItem) => {
                if (row.value == '%空值%') {
                    compControl.showAlert = true
                    return h('span', { style: { color: 'orangered' } }, row.value.toString())
                } else {
                    return h('span', null, row.value.toString())
                }
            }
        },

        {
            title: '操作',
            render: (row: ConfigurationItem) => {
                let sw
                if (row.active) {
                    sw = [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'warning',
                                secondary: true,
                                onClick: () => compControl.handleSwitchFunction(row.key)
                            },
                            () => '禁用该项'
                        ),
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'info',
                                secondary: true,
                                onClick: () => {
                                    compControl.handleEditValue(row)
                                }
                            },
                            () => '修改值'
                        )
                    ]
                } else {
                    sw = [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                type: 'primary',
                                secondary: true,
                                onClick: () => compControl.handleSwitchFunction(row.key)
                            },
                            () => '启用该项'
                        )
                    ]
                }
                return h(NSpace, {}, () => sw)
            }
        }
    ],
    data: [] as ConfigurationItem[] | any[],
    pagination: {
        page: 2,
        pageSize: 30,
        showSizePicker: true,
        pageSizes: [30, 50, 100],
        onChange: (page: number) => {
            tableControl.pagination.page = page
        },
        onUpdatePageSize: (pageSize: number) => {
            tableControl.pagination.pageSize = pageSize
            tableControl.pagination.page = 1
        }
    }
})
const compControl = reactive({
    showAlert: false,
    showModal: false,
    modal_show_data: {} as ConfigurationItem,
    modal_reactive_data: {} as ConfigurationItem,

    handleSwitchFunction(key: string) {
        axp_switchOption(key).then((response_data) => {
            if (response_data) {
                const i = tableControl.data.findIndex((item) => item.key === key)
                tableControl.data[i].active = !tableControl.data[i].active
                tableControl.data[i].value = response_data['default']

                message.success('操作成功')
            } else {
                message.error('操作失败')
            }
        })
    },
    handleEditValue(row: ConfigurationItem) {
        compControl.modal_show_data = JSON.parse(JSON.stringify(row))
        compControl.modal_reactive_data = row
        compControl.showModal = true
    },
    handleConfirmEdit() {
        apx_editOptionValue(compControl.modal_show_data.key, compControl.modal_show_data.value).then(
            (response_data) => {
                compControl.modal_reactive_data.value = compControl.modal_show_data.value
                message.success('操作成功')
                compControl.showModal = false
            }
        )
    }
})

onMounted(() => {
    axg_getOptions('global').then((data) => {
        tableControl.data = data
    })
})
</script>

<style lang="scss" scoped>
:deep(.n-data-table-td.col-default) {
    color: #80808080;
}
</style>
